<!DOCTYPE html>
<html>
<head>
    <title>翻译频道</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->

    <link href="/css/jquery.mobile-1.3.1.min.css" rel="stylesheet">
    <link href="/css/jqm-demos.css" rel="stylesheet">
    <script src="/js/jquery-1.9.1.min.js"></script>
    <script src="/js/jquery.mobile-1.3.1.js"></script>
    <style type="text/css">
        body {
            -webkit-transform: translate3d(0, 0, 0);
        }
    </style>
    <!-- Bootstrap -->
    <link href="/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="/css/custom.css" rel="stylesheet">
</head>
<body>


<div data-role="page" class="jqm-demos">
    <div data-theme="b" id="defaultpanel" data-role="panel"
         class="ui-panel ui-panel-position-left ui-panel-display-reveal ui-body-b ui-panel-animate ui-panel-closed">

        <div class="ui-panel-inner">
            <div class="panel-content">
                <h3>Default panel options</h3>

                <p>This panel has all the default options: positioned on the left with the reveal display mode. The
                    panel markup is <em>before</em> the header, content and footer in the source order.</p>

                <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
                <a data-inline="true" data-icon="delete" data-theme="c" data-role="button" data-rel="close"
                   href="#demo-links" data-corners="true" data-shadow="true" data-iconshadow="true"
                   data-wrapperels="span"
                   class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-btn-icon-left ui-btn-up-c"><span
                        class="ui-btn-inner"><span class="ui-btn-text">Close panel</span><span
                        class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a>
            </div>
        </div>
        <!-- /content wrapper for padding -->

    </div>
    <!-- header -->
    <div class="jqm-header" data-role="header" role="banner">
        <a data-iconpos="notext" data-icon="bars"
           class="ui-btn-left jqm-navmenu-link "
           href="#defaultpanel"><span class="ui-btn-inner"><span class="ui-btn-text">Navigation</span><span
                class="ui-icon ui-icon-bars ui-icon-shadow">&nbsp;</span></span></a>

        <h1>翻译频道</h1>
    </div>
    <!-- content -->
    <div data-role="content">

        <%- listcontent%>

    </div>
    <!-- footer -->
    <div data-role="footer">
        <h1>footer</h1>
    </div>
</div>
<!-- page -->


<script type="text/javascript">
//    $("a").click(function (event) {
//        event.preventDefault();
//        window.location = $(this).attr("href") + '?title=' + $(this).attr("title");
//    });
// Define a click binding for all anchors in the page
$( "a" ).on( "click", function( event ){

    // Prevent the usual navigation behavior
    event.preventDefault();
  //  console.log($.mobile.phonegapNavigationEnabled);
    // Alter the url according to the anchor's href attribute, and
    // store the data-foo attribute information with the url
    //ajax 导航
    $.mobile.navigate( $(this).attr( "href" )+ '?title=' + $(this).attr("title"));

    // Hypothetical content alteration based on the url. E.g, make
    // an AJAX request for JSON data and render a template into the page.
   // alterContent(  $(this).attr( "href" ) );
});
$( window ).on( "navigate", function( event, data ) {
    console.log( data.state.info );
    console.log( data.state.direction )
    console.log( data.state.url )
    console.log( data.state.hash )
});
</script>
</body>
</html>